import React from 'react';
import router from 'umi/router';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Steps, Radio, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { urlParse } from '@/utils/utils';

const { Step } = Steps;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      billId: '',
      splitType: '1',
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { billId } = this.state;
    const billIds = urlParse(location.search).billId || billId;
    this.setState({ billId: billIds });
  }

  // 选择单选框
  changesRadio = (e, target) => {
    this.setState({ [target]: e.target.value });
  };

  render() {
    const { splitType, billId } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Steps current={0}>
            <Step title="选择拆分类型" />
            <Step title="填写拆分信息" />
            <Step title="完成" />
          </Steps>
          <Form hideRequiredMark style={{ marginTop: 10 }}>
            <FormItem label="&nbsp;" colon={false} style={{ textAlign: 'center' }}>
              <RadioGroup
                onChange={e => this.changesRadio(e, 'splitType')}
                defaultValue={splitType}
              >
                {/* {SER_TYPE.map(item => <Radio key={item.itemCode} value={item.itemCode}>{item.itemName}</Radio>)} */}
                <Radio key="1" value="1">
                  按员工拆分
                </Radio>
                {/* <Radio key={'2'} value={'2'}>
                  按产品拆分
                </Radio> */}
              </RadioGroup>
            </FormItem>
            <br />
          </Form>
          <div style={{ marginTop: 50, marginBottom: 30, textAlign: 'center' }}>
            <Button style={{ marginRight: 30 }} onClick={() => window.history.back()}>
              返回
            </Button>
            <Button
              type="primary"
              onClick={() =>
                router.push(
                  `/chargemanage/supplybilling/splitbyemp?splitType=${splitType}&billId=${billId}`
                )
              }
            >
              下一步
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
